<template>
  <div class="gantt-box">
    <div class="gantt-box-flex"  :key="'gantt-1'">
      <div class="gantt-header">
        <div></div>
        <div class="moth-flex">
          <div v-for="item in  dateTypes" :key="item.value"
               :class="{
                  'month-item-btn': true,
                   'month-item-btn-active': scaleUnit === item.value
                 }"
               @click="changeDate(item.value )">{{item.label}}</div>
          <div  :class="{
                  'month-item-btn': true,
                   'month-item-btn-active': scaleUnit === 'day'
                 }" @click="changeDate('day')">今天</div>
        </div>
      </div>
      <HightChartsShip  ref="gantt"
                        :scaleUnit="scaleUnit"
                        :ganttConfig="ganttConfig"
                        @changeVal="onChangeDate"
      />
    </div>
  </div>
</template>
<script setup>
import {defineProps, ref} from "vue";
import HightChartsShip  from './VesselGantt/HightChartsShip.vue'
const props = defineProps({
  activeKey: {
    type: String,
    default: ''
  }
})
const gantt = ref(null)
const dateTypes = ref([
  {
    label: '周',
    value: 'week'
  },
  {
    label: '月',
    value: 'month'
  },
  {
    label: '季',
    value: 'quarter'
  },
  {
    label: '年',
    value: 'year'
  }
])
const scaleUnit = ref('')//船舶排布
const onChangeDate = (val) => {
  scaleUnit.value = val
}
const changeDate = (type) => {
  scaleUnit.value = type
}
const ganttConfig = ref({
  // 数据源
  data: [
    {start: '2021-6-1 8',end: '2021-6-1 12',machineName: '小米',machineNo: '红米34', y: 1},
    {start: '2021-6-3 8',end: '2021-6-11 12',machineName: '小米2',machineNo: '红米153', y: 1},
    {start: '2021-6-4 8',end: '2021-6-10 12',machineName: '小米3',machineNo: '红米263',y: 1},
    {start: '2021-6-2 8',end: '2021-6-5 12',machineName: '小米4',machineNo: '红米373',  y: 1},
  ],
  // 左侧表格列配置
  tableConfig: [
    {
      title: '设备名称',
      labels: 'machineName',
    },
    {
      title: '设备编码',
      labels: 'machineNo',
    },
  ],
})
</script>

<style lang="scss" scoped>
.gantt-box-flex {
  background: #ffffff;
  margin-top: 10px;
}

</style>
